<template>
  <div class="contact-content">
    <!-- 联系我们 -->
    <div class="us-top">
      <div class="text banner">
        <p>联系我们</p>
        <p>欢迎与我们联系，我们携手共进，共同努力让未来因我们而更加美好。</p>
      </div>
    </div>
    <div class="contact-box banner">
      <div class="title">联系我们</div>
      <div class="contact-mode">
        <!-- <div class="card df">
          <div class="icon"> <img src="../../assets/xc-img/ico_us_01.png" alt=""> </div>
          <div class="text">
            <p>联系电话</p>
            <p>0000-12345678</p>
          </div>
        </div> -->
        <div class="card df" v-for="(item, index) in cardList" :key="index">
          <div class="icon"> <img :src="item.icon" alt=""> </div>
          <div class="text">
            <p>{{item.title}}</p>
            <p>{{item.tel}}</p>
          </div>
        </div>
        <!-- <div class="card"></div>
        <div class="card"></div> -->
      </div>
    </div>
    <!-- 地图 -->
    <div class="map">
      <map-nav></map-nav>
    </div>
  </div>
</template>

<script>
import MapNav from '../../components/map/index.vue'
export default {
  name: 'ContactUs',
  components: {
    MapNav,
  },
  data() {
    return {
      cardList: [
        {id: 1, title: '联系电话', tel: '0000-12345678', icon: require('@/assets/xc-img/ico_us_01.png')},
        {id: 2, title: '联系客服', tel: '3256894566@qq.com', icon: require('@/assets/xc-img/ico_us_02.png')},
        {id: 3, title: '邮箱地址',  tel: 'xince.com', icon: require('@/assets/xc-img/ico_us_03.png')},
        {id: 4, title: '公司网址', tel: 'www.xince.com', icon: require('@/assets/xc-img/ico_us_04.png')}
      ]
    }
  },
  methods: {

  }
}
</script>

<style lang="scss" scoped>
.contact-content {
  .us-top {
    width: 100%;
    height: 360px;
    padding: 110px 0 0;
    background: url('../../assets/xc-img/partner_pc_bgc.png');
    background-size: 100% 100%; /* 宽度和高度都设置为容器的100% */
    .text {
      color: #FFFFFF;
      p:nth-child(1) {
        font-family: Alimama ShuHeiTi;
        font-weight: bold;
        font-size: 36px;
        margin-bottom: 23px;
      }
      p:nth-child(2) {
        font-size: 22px;
        font-family: Microsoft YaHei;
      }
    }
  }
  .contact-box {
    margin-top: 100px;
    .title {
      color: #31322C;
      font-family: Alimama ShuHeiTi;
      font-weight: bold;
      text-align: center;
      font-size: 40px;
      margin-bottom: 72px;
    }
    .contact-mode {
      display: flex;
      justify-content: space-between;
      flex-wrap: wrap;//换行
      .card {
        width: 49%;
        height: 193px;
        background: #FFFFFF;
        border: 1px solid #ECECEC;
        box-shadow: 0px 4px 9px 5px #C7C7C73F;
        margin-bottom: 30px;
        padding: 20px 0;
        .icon {
          width: 230px;
          height: 150px;
          border-right: 2px solid #ccc;
          text-align: center;
          display: flex;
          justify-content: center;
          align-items: center;
          img {
            width: 53px;
            height: 53px;
          }
          
        }
        .text {
            flex: 1;
            margin: auto;
            padding-left: 40px;
            p:nth-child(1) {
              color: #31322C;
              font-family: Alimama ShuHeiTi;
              font-weight: bold;
              font-size: 20px;
              margin-bottom: 22px;
            }
            p:nth-child(2) {
              color: #6A6A6A;
              font-family: Microsoft YaHei;
              font-weight: 100;
              font-size: 24px;
            }
          }
      }
    }
    // .map {
    //   width: 100%;
    //   height: 500px;
    //   margin-top: 20px;
    //   border: 1px solid pink;
    // }
  }
}
</style>